<template>
  <div>
    <header>
      <div class="header-left">
        <span class="iconfont">&#xe61c;</span>
      </div>
      <div class="header-input">
        <span class="iconfont">&#xe650;</span>
        <input type="text" placeholder="输入城市/景点/游玩主题">
      </div>
      <router-link to="/city">
        <div class="header-right">
            <div class="header-city">
              {{this.city}}
            </div>
            <span class="iconfont down">&#xe64a;</span>
        </div>
      </router-link>
    </header>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data () {
    return {}
  },
  computed: {
    ...mapState(['city'])
  }
}
</script>

<style scoped lang="stylus">
  @import '~@/assets/css/varibles.styl';
  header
    background $bgColor
    font-size 0.3rem
    color #fff
    display flex
    align-items center
    height .86rem
  .header-left
    justify-content center
    display flex
    align-items center
    width .64rem
    font-size .3rem
  .header-input
    background #fff
    padding-left .2rem
    flex 1
    border-radius .1rem
    height .56rem
    line-height .64rem
    color #ccc
    display flex
    align-items center
    input
      padding-left .08rem
      flex 1
      height 100%
      border none
      outline none
      border-radius .1rem
  .header-right
    display flex
    justify-content center
    align-items center
    min-width 1.04rem
    padding 0 .1rem
    height 100%
    color #fff
    text-align center
    .down
      font-size .24rem
      padding .08rem 0 0 .08rem
</style>
